<template>
  <div class="outer">
    <!-- 组件复用的时候传递不同的数据 可以用插槽 -->

    <Tab tittle="美食">
      <!-- 组件中书写的内容会放到对应的插槽中 -->
      <img width="200" src="./bk.png" alt="" />
    </Tab>
    <Tab tittle="电影">
      <!-- 组件中书写的内容会放到对应的插槽中 -->
      <ul>
        <li>星际穿越</li>
        <li>阿甘正传</li>
        <li>绿皮车</li>
      </ul>
    </Tab>
    <Tab tittle="音乐">
      <!-- 组件中书写的内容会放到对应的插槽中 -->
      <img width="200" src="./kf.png" alt="" />
    </Tab>
  </div>
</template>

<script>
import Tab from "./components/Tab.vue";
export default {
  name: "App",
  components: { Tab },
};
</script>

<style>
.outer {
  width: 800px;
  display: flex;
  justify-content: space-between;
}
</style>